<template>
  <div>
      <Nav></Nav>
        <transition :name="transitionName">
        <router-view class="transitionBody"></router-view>
        </transition>
      <Footer></Footer>
  </div>
</template>
<script>
//头部信息
import Nav from "./components/Nav.vue"
import Footer from "./components/Footer.vue"

export default {
    data:{
        transitionName: 'transitionLeft',
    },
     watch: {
    '$route'(to, from) {
        const arr = ['/shop-order', '/driver-info', '/shop-info', '/shopOrder-detail', '/change-password']
        this.transitionName = arr.indexOf(to.path) > arr.indexOf(from.path) ? 'transitionLeft' : 'transitionRight'
    }
    },
    components:{
        Nav,
        Footer
    }
}
</script>

<style>
*{
    padding: 0;
    margin: 0;
}
body {
    background-color: #ffffff;
    font-family: 'MicrosoftYaHeiUI';
}
@font-face {
    font-family: 'mvboli';
    src: url('./utils/css/mvboli.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
.transitionBody{
 transition: all 0.4s ease-out;
}
.transitionLeft-enter,
.transitionRight-leave-active {
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
}
.transitionLeft-leave-active,
.transitionRight-enter {
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
}
.transitionLeft-enter-active,
.transitionRight-enter-active {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
</style>
